// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.order-line-items {
  @_top: order-line-items;

  padding: 0;
  list-style: none;

  &__data {
    font-size: @font-size--title-small;

    @media @desktop {
      font-size: inherit;
    }
    &--name {
      grid-area: name;
    }

    &--quantity {
      grid-area: quantity;
    }

    &--value {
      grid-area: value;
      text-align: right;
    }

    &--weight {
      grid-area: weight;
    }
  }

  &__item {
    display: grid;
    padding: 5px 10px;
    grid-gap: 5px 10px;

    &--main {
      grid-template-areas: "name name name name" ". weight quantity value";
      grid-template-columns: 1fr repeat(3, minmax(50px, max-content));

      @media @narrow-up {
        grid-template-areas: "name weight quantity value";
        grid-template-columns: 1fr repeat(3, minmax(100px, max-content));
        grid-template-rows: auto;
      }

      &:nth-child(odd) {
        background-color: @osu-colour-b4;
      }
    }

    &--footer {
      grid-template: "name value" / 1fr 100px;
    }

    &--footer-total {
      background-color: hsla(var(--hsl-orange-2), 25%);

      .@{_top}--checkout & {
        display: none;
      }
    }
  }

  &__subtext {
    color: hsl(var(--hsl-c2));
    font-size: 80%;
  }
}
